@charset'UTF-8';

/**
 * 圣诞欧洲日
 * @Author zzz
 * @email zhangzongzheng@ymatou.com
 * @Date 2015/12/17
 */

@import'../_components/variables.scss';
@import'../_components/_mixin.scss';
@import'../_components/reset.scss';
@import'../_components/column.scss';
@import'../assets/ymtUI.scss';
@import'../assets/ymt_components.scss';
@import'../assets/common.scss';
@import'../black_five/_proList.scss';
@import'../assets/_global_good.scss';

// $imgPath:'/images/christmas/country/asia/';
$imgPath:'http://staticontent.ymatou.com/images/activity/christmas/country/asia/';
@include productList(#ef3b3b, #fff);
.evt-continer {
    background: #300000;
}

.evt-banner {
    height: $rem*450;
    background-image:url(#{$imgPath}banner.jpg);
    @extend .bg__full;
}

.evt-christmas-gift {
    height: $rem*290;
    margin: $rem*10 0;
    background-image:url(#{$imgPath}christmas_gift.jpg);
    @extend .bg__full;
}

.chr-pro-00 {
    @include column('.bf-', 3, $rem*8);
    .bf-list {
        height: $rem*410;
    }
    .bf-item {
        height: $rem*390;
        .pro-wrapper {
            .pic {
                height: $rem*200;
                margin: $rem*10;
                background-size: contain;
                background-position: center;
            }
            .info {
                margin-top: 0;
                h4 {
                    font-size: $rem*15;
                }
                div {
                    font-size: $rem*13;
                }
                .price-wrapper2 {
                    height: $rem*36;
                    line-height: $rem*36;
                    font-size: $rem*15;
                    strong {
                        font-size: $rem*15;
                    }
                }
            }
        }
    }
}

//砍价团
.bf-group {
    background-color: #f13826;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    /* .bf-area-hd {
        height: $rem*110;
        background-image: url(#{$imgPath}kjt.jpg);
        @extend .bg__full;
    } */
    .bf-area-bd {
        position: relative;
        height: $rem*552;
        background-size: contain;
    }
    &-list {
        white-space: nowrap;
        font-size: 0;
    }
    &-item {
        height: $rem*552;
        padding: $rem*10;
        display: inline-block;
        background-size: $rem*40 $rem*40; //控制条纹的大小
        background-image: -webkit-gradient(linear, 0 0, 100% 100%,
                color-stop(.25, rgba(156, 17, 51,1)), color-stop(.25, rgba(255,255,255,1)),
                color-stop(.5, rgba(255,255,255,1)), color-stop(.5, rgba(156, 17, 51,1)),
                color-stop(.75, rgba(156, 17, 51,1)), color-stop(.75, rgba(255,255,255,1)),
                to(rgba(255,255,255,1)));
    }
    &-pro {
        width: 100%;
        height: $rem*532;
        position: relative;
        background-size: cover;
    }
    &-count {
        font-size: $rem*24;
        color: #fff;
        padding: $rem*4 $rem*22;
        background: #c33;
        position: absolute;
        left: $rem*40;
        bottom: $rem*25;
        border-radius: $rem*50;
    }
    //砍价团分页
    &-pagination {
        position: absolute;
        bottom: $rem*40;
        left: 0;
        text-align: center;
        width: 100%;
        .swiper-pagination-bullet {
            width: $rem*15;
            height: $rem*15;
            border-radius: 50%;
            background: #ffa8a3;
            margin-right: $rem*15;
            display: inline-block;
        }
        .swiper-pagination-bullet-active {
            background: #ff5247;
        }
    }
    .module-hold {
        // height:$rem*400;
    }
}

//优惠券
.coupon-area {
    height: $rem*326;
    background-color: #fff;
    padding-top: $rem*242;
    margin-top: $rem*10;
    @extend .bg__full;
    .coupon-list {
        width: 100%;
        height: $rem*80;
        padding: $rem*4 $rem*90;
        background-color: #06b29f;
        .coupon-item-wrap {
            width: 33%;
            height: $rem*72;
            float: left;
            // height: $rem*68;
            &:nth-child(1) {
                padding-right: $rem*12
            }
            &:nth-child(2) {
                padding: 0 $rem*6;
            }
            &:nth-child(3) {
                padding-left: $rem*12;
            }
            .coupon-item {
                font-size: $rem*18;
                color: #fff;
                text-align: center;
                height: 100%;
                border: 2px solid #fff;
                // font-weight: 700;
                em {
                    font-size: $rem*30;
                }
            }
        }
    }
}

.chr-pro {
    .evt-area-hd {
        background-image:url(#{$imgPath}/title_bg.jpg);
    }
}

@for $i from 1 through 3 {
    .chr-pro.chr-country-0#{$i} {
        .evt-area-hd {
            background-image:url(#{$imgPath}/title_country_#{$i}.jpg?v=1);
            height: $rem*294;
        }
    }
}

//重置全球热卖标题样式
@mixin resetHotStyle($color) {
    .hot-hd {
        .title {
            color: $color !important;
            &:before {
                border-left-color: $color !important;
            }
            &:after {
                border-right-color: $color !important;
            }
        }
    }
}

.chr-pro {
    padding-top: $rem*5;
    background: #300000;
    @include resetHotStyle(#300000);
    .evt-area-hd{
        margin: 0 $rem*10;
        height:$rem*98;
        line-height: $rem*98;
        @extend .bg__full;
        background-size: cover;
        text-align: center;
        font-size: $rem*36;
        color: #fff;

        .title {
            display: inline-block;
            padding: 0 $rem*24;
            position: relative;
            strong {
                font-size: $rem*60;
                margin-left: $rem*20;
            }
            &:before {
                content: '';
                display: inline-block;
                width: $rem*100;
                height: $rem*4;
                background-color: #fff;
                position: absolute;
                left: -$rem*100;
                top: 50%;
            }

            &:after {
                content: '';
                display: inline-block;
                width: $rem*100;
                height: $rem*4;
                background-color: #fff;
                position: absolute;
                right: -$rem*100;
                top: 50%;
            }
        }
    }
    .evt-area-bd {
        padding: $rem*10;
    }
    .evt-area-ft {
        padding: 0 $rem*10 $rem*10;
    }
    /* //查看更多
    .see-more{
        width:100%;
        border:2px solid #fff;
        border-radius:$rem*6;
        text-align:center;
        color:#fff;
        font-size:$rem*34;
        height:$rem*70;
        line-height:$rem*70;
        //横线
        i{
            width:$rem*40;
            height:$rem*4;
            background:#fff;
            display:inline-block;
            vertical-align: middle;

        }
        span{
            margin:0 $rem*25;
        }
    } */
    .hot-hd {
        padding: $rem*20 0;
        margin-bottom: $rem*20;
        $color: #fff;
        .inner {
            width: 100%;
            border-bottom: 1px solid #fff;
            height: $rem*25;
        }
        .title {
            height: $rem*50;
            line-height: $rem*50;
            width: $rem*330;
            background: #fff;
            color: $color;
            font-size: $rem*35;
            text-align: center;
            font-weight: bold;
            margin: 0 auto;
            &:before,
            &:after {
                content: '';
                border: $rem*25 solid rgba(0, 0, 0, 0);
                display: inline-block;
            }
            &:before {
                border-left-color: $color;
                float: left;
                margin-left: -1px;
            }
            &:after {
                border-right-color: $color;
                float: right;
                margin-right: -1px;
            }
        }
    }
}

//丝带页签
.ribbon-tab {
    height: $rem*70;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 $rem*26;
    transition: transform 0.25s ease-in-out;
    will-change: transform;
    transform: translate(-100%, 0);
    &:before {
        content: '';
        display: block;
        width: $rem*33;
        height: $rem*70;
        background-image: url(#{$imgPath}nav_acc_left.png);
        @extend .bg_full;
        position: absolute;
        top: 0;
        left: 0;
    }
    &:after {
        content: '';
        display: block;
        width: $rem*33;
        height: $rem*70;
        background-image: url(#{$imgPath}nav_acc_right.png);
        @extend .bg_full;
        position: absolute;
        top: 0;
        right: 0;
    }
    &.show {
        transform: translate(0, 0);
    }
    .tab-wrapper {
        height: $rem*70;
        padding: $rem*3 $rem*4;
        position: relative;
    }
    .tab-list {
        height: 100%;
        margin: 0 auto;
        background: #e53a35;
        position: relative;
        z-index: 2;
        font-size: $rem*22;
        color: #fff;
        border: 1px solid #f29d9a;
        @include clearfix();
        &>li {
            padding: 0 $rem*10;
            width: 20%;
            height: 100%;
            float: left;
            text-align: center;
            // line-height:$rem*62;
            &.active {
                background: #43a047;
                color: #fff;
            }
            >span {
                display: inline-block;
                vertical-align: middle;
                line-height: $rem*62;
                &.two-line {
                    line-height: 1.4;
                }
            }
        }
    }
}

//全球买手
.seller-seeding {
    padding: $rem*10;
    padding-right: 0;
    background: #fff;
    @include clearfix();
    .seller-title {
        height: $rem*376;
        width: $rem*79;
        float: left;
        margin-right: $rem*3;
        @extend .bg__full;
    }
    .seller-area {
        float: left;
        width: $rem*322;
        height: $rem*187;
        margin-right: $rem*3;
        margin-bottom: $rem*3;
        @extend .bg__full;
    }
}

.bottom-tab {
    height: $rem*173;
    nav {
        transition: transform 0.25s ease-in-out;
        will-change: transform;
        transform: translate(0, 100%);
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: $rem*173;
        @extend .bg__full;
        padding: $rem*93 $rem*60 $rem*8;
        background-image:url(#{$imgPath}nav_bottom_bg.png);
        background-position: bottom;
        &.show {
            transform: translate(0, 0);
        }
        ul {
            width: 100%;
            height: $rem*72;
            line-height: $rem*72;
            @include clearfix();
        }
        li {
            float: left;
            text-align: center;
            color: #fff;
            font-size: $rem*28;
            font-weight: bold;
            margin-right: $rem*70;
            &:last-child {
                margin-right: 0;
            }
            &.active {
                color: #ffd33b;
            }
        }
    }
}

.ymt-butler {
    bottom: $rem*300;
    background-image: url(http://pm4.img.ymatou.com/G02/M03/99/8D/CgvUBVZxShKAPR9dAAAky5AzCb8635_o.png);
}

.module-hold {
    background-color: #fff;
    background-image: url(http://staticontent.ymatou.com/images/activity/christmas/christmas-loading.gif);
}

.ios-bartools {
    height: $rem*150;
    &-wrapper {
        background: rgba(255, 255, 255, 0.92);
        height: $rem*150;
        z-index: 9999;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        border-bottom: $rem*2 solid rgba(0, 0, 0, .5);
        padding-top: $rem*70;
        h2 {
            font-size: $rem*38;
            text-align: center;
            color: #333;
            font-weight: bold;
        }
    }
}
